<template>
	<!-- 猜你喜欢 -->
	<view class="like">
		<view class="header">
			<view class="headerleft">
				<image mode="scaleToFill" class="headerimg" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png"></image>
				猜你喜欢
			</view>
		</view>
		<view class="content">
			<view class="uni-flex uni-row content-item" v-for="like in likeList" :key="like.id">
				<view class="text content-item-left">
					<image lazy-load="true" mode="scaleToFill" :src="like.img"></image>
				</view>
				<view class="uni-flex uni-column content-item-right">
					<view class="name">
						{{ like.name }}
					</view>
					<view class="star">
						<uni-rate size=16 :disabled="true" :value="like.value"></uni-rate>
						<span class="comment">{{ like.commentNum }}条评论</span>
					</view>
					<view class="uni-flex uni-row price-address">
						<view class="price"><span class="mpg-price">¥<span class="price-num">{{ like.price }}</span></span>起</view>
						<view class="address">{{ like.address }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	
	export default {
		components: {
			uniRate
		},
		props: {
			likeList : {
				type: Array,
				require: true
			}
		},
		data() {
			return {
			};
		},
		methods:{
			//更新分类指示器
			toScenicSpot(spot) {
				console.log("go spot")
			}
		}
	}
</script>
	
<style lang="scss" scoped>
	.like{
		width: 100%;
		background-color: #fcfcfc;
		.header{
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.headerleft{
				line-height: 50upx;
				font-size: 30upx;
				.headerimg{
					width: 30upx;
					height: 30upx;
					margin-left: 25upx;
				}
			}
		}
		.content{
			.content-item{
				margin-left: 20upx;
				.content-item-left{
					width: 200upx;
					height: 220upx;
					display: flex; 
					justify-content: center;
					align-items: center;
					image{
						width: 185upx;
						height: 185upx;
					}
				}
				.content-item-right{
					flex: 1;
					justify-content: space-between;
					margin-left: 20upx;
					.name{
						margin-top: 26upx;
						font-size: 32upx;
						line-height: 44upx;
						text-align: left;
						color: #212121;
					}
					.star{
						display: flex;
						text-align: left;
						margin-top: -15upx;
						.comment{
							margin-left: 30upx;
							color: #616161;
							font-size: 24upx;
						}
					}
					.price-address{
						margin-bottom: 25upx;
						display: flex;
						justify-content: space-between;
						.price{
							font-size: 24upx;
							color: #616161;
							line-height: 50upx;
							.mpg-price{
								color: #ff8300;
								.price-num{
									font-size: 35upx;
								}
							}
						}
						.address{
							font-size: 24upx;
							color: #616161;
							line-height: 50upx;
							margin-right: 20upx;
						}
					}
				}
			}
		}
	}
</style>
